<template>
    <z-paging @pageScroll="pageScroll" ref="paging" v-model="mhList" @query="queryList">
        <u-sticky>
            <headsty :mrbot="'46'" searchStatus @transmit="getkeyword"
                :leftImg="'https://morgan.dingxians.cn/static/wxs/3.png'"></headsty>
            <view class="top_boxtabs">
                <view class="dange_img_box" :class="tabsId == item.id ? 'dange_img_box1' : ''" @click="tabBtn(item)"
                    v-for="(item, index) in tabs" :key="index"
                    :style="{ backgroundImage: 'url(' + (tabsId == item.id ? item.sel_img : item.image) + ')' }">
                    {{ item.text }}
                </view>
            </view>
        </u-sticky>
        <view class="dange_con_box" v-for="(item, index) in mhList" :key="index" hover-class="none"
            @click="$router('/uniPage/unlDetail?id=' + item.id + '&tabsId=' + tabsId)">
            <view class="beijing_tu_box" style="background-image: url('https://morgan.dingxians.cn/static/wxs/4.png');">
            </view>
            <view class="beijing_sm_box" style="background-image: url('https://morgan.dingxians.cn/static/wxs/7.png');">
                <!-- <image :src="item.image" mode="scaleToFill" /> -->
				<easy-loadimage mode="scaleToFill" :scroll-top="scrollTop" :image-src="item.image"></easy-loadimage>
            </view>
            <view class="bot_box" style="background-image: url('https://morgan.dingxians.cn/static/wxs/2.png');">
                <view class="left_name_box">{{ item.name }}</view>
                <view class="left_price_box">{{ item.price }}元素</view>
            </view>
        </view>
    </z-paging>
</template>
<script>
import headsty from '../../components/indexhead.vue'
export default {
    components: {
        headsty
    },
    data() {
        return {
            keyword: '',
            tabs: [
                {
                    id: 1,
                    text: '全部',
                    image: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
                },
                {
                    id: 2,
                    text: '无限赏',
                    image: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
                },
                {
                    id: 3,
                    text: '无限高保',
                    image: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
                },
                {
                    id: 4,
                    text: '连击赏',
                    image: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png'
                },
            ],
            tabsId: 1,
            mhList: [],
			scrollTop:''
        }
    },
    methods: {
			// 监听滚动高度
			pageScroll(event) {
				this.scrollTop = event.detail.scrollTop;
			},
        getkeyword(e) {
            this.keyword = e
            console.log(this.keyword)
        },
        tabBtn(item) {
            this.tabsId = item.id
            this.$refs.paging.reload()
        },
        queryList(pageNo, pageSize) {
            let data = {
                cat_id: this.tabsId,
                page: pageNo,
                limit: pageSize
            }
            this.$Request.get(this.$api.index.blindBox, data).then(res => {
                if (res.code == 200) {
                    this.$refs.paging.complete(res.data.data)
                }
            })
        },

    }
}
</script>
<style lang="scss" scoped>
.top_boxtabs {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: flex-start;
    padding: 0 30rpx;
    margin-bottom: 19rpx;

    .dange_img_box {
        width: 161rpx;
        height: 80rpx;
        text-align: center;
        line-height: 80rpx;
        background-size: 100% 100%;
        font-family: text1;
        font-weight: normal;
        font-size: 30rpx;
        color: #A99B7B;
        font-style: italic;
        margin-right: 20rpx;

        &.dange_img_box1 {
            color: rgba(238, 213, 46, 1);
        }
    }
}

.dange_con_box {
    width: 697rpx;
    height: 320rpx;
    margin: auto;
    position: relative;
    background-size: 100% 100%;
    margin-bottom: 16rpx;

    .beijing_tu_box {
        width: 697rpx;
        height: 320rpx;
        position: absolute;
        background-size: 100% 100%;
        z-index: 1;
    }

    .beijing_sm_box {
        width: 686rpx;
        height: 276rpx;
        position: absolute;
        top: 21rpx;
        right: 2rpx;
        background-size: 100% 100%;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .bot_box {
        position: absolute;
        width: 570rpx;
        height: 90rpx;
        background-size: cover;
        bottom: -10rpx;
        right: 0;
        box-sizing: border-box;
        padding: 0 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 2;

        .left_name_box {
            width: 320rpx;
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFEE1F;
            line-height: 90rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .left_price_box {
            height: 90rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFEE1F;
            line-height: 90rpx;
        }
    }
}
</style>